<template>
  <section>
    <!--用户列表-->
    <el-table
        :data="userList.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
        border
        style="width: 100%;"
        v-loading="listLoading"
    >
      <el-table-column prop="_id" label="id" min-width="120" sortable></el-table-column>
      <el-table-column prop="roles" label="等级" min-width="120" :formatter="formatRole" sortable></el-table-column>
      <el-table-column prop="account" label="账号" min-width="120" ></el-table-column>
      <el-table-column prop="userName" label="姓名" min-width="120" sortable></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号" min-width="120" sortable></el-table-column>
      <el-table-column prop="passWord" label="密码" min-width="120" sortable></el-table-column>
      <el-table-column prop="wxAuthorizationStatus" label="微信授权状态" min-width="120" :formatter="formatWxStatus" sortable></el-table-column>
      <el-table-column label="操作" width="200" v-if="roles == 'root'">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入用户名搜索"/>
        </template>
        <template slot-scope="scope">
          <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import {getUserList,delUser} from "../api/user/api";

  export default {
    data() {
      return {
        search:'',
        userList: [],
        listLoading: false,
        roles: JSON.parse(sessionStorage.getItem('user')).roles
      }
    },
    methods: {
      //删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该用戶吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          let para = { id: row._id };
          delUser(para).then((res) => {
            this.listLoading = false;
            this.getUserList();
          });
        }).catch(() => {

        });
      },
      // 获取用户列表
      getUserList(){
        getUserList({}).then((res) => {
          if(res.code == 200) {
            this.userList = res.data
          }
        });
      },
      formatWxStatus(row, column) {
        if(row.wxAuthorizationStatus){
          return "已授权";
        }else{
          return "未授权";
        }
      },
      //角色转换
      formatRole(row, column) {
        switch (row.roles) {
          case "root":
            return "管理员";
          case "member":
            return "会员";
        }
      }
    },
    mounted() {
      this.getUserList()
    }
  }

</script>

<style scoped>

</style>
